
<template>
  <el-menu
    default-active="2"
    class="el-menu-vertical-demo"
    @select="handleSelect"
    @close="handleClose"
  >
    <el-menu-item v-for="v in menu" :key="v.name" :index="v.name">
      <el-icon>
        <!-- 动态加载图标组件 -->
        <component :is="v.icon" />
      </el-icon>
      <span>{{ v.desc }}</span>
    </el-menu-item>

  </el-menu>
</template>

<script setup lang="ts">

import { ref } from 'vue'
import { nowMenu } from '@/global/store.ts'

const menu = ref([
  {
    desc:"路由",
    name:"routeShow",
    icon:"Setting"
  },
  {
    desc:"文件",
    name:"file",
    icon:"User"
  },
])

const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
  nowMenu.value = key
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>
